<template>
    <div class="city-hot">
        <p class="title">热门城市</p>
        <div class="list">
            <span v-for="item in dt">{{ item.name }}</span>
        </div>
    </div>
</template>

<script>
    export default {
        name: "CityHot",
        props: ['dt']
    }
</script>

<style scoped>
    .city-hot {
        margin-top: 75px;
    }
    .title {
        background: #eeeeee;
        height: 30px;
        line-height: 30px;
        padding: 0 10px;
        font-size: 14px;
    }
    .list {
        display: flex;
        flex-wrap: wrap;
    }
    span {
        width: calc(100% / 3);
        height: 30px;
        line-height: 30px;
        box-sizing: border-box;
        text-align: center;
        font-size: 15px;
        border-right: 1px solid #eeeeee;
        border-bottom: 1px solid #eeeeee;
    }
    span:nth-of-type(3n) {
        border-right: none;
    }

</style>